﻿<template>
    <div>
        <el-form label-width="150px" :model="AddUsageRecordDB" ref="AddUsageRecordDB_refs">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="请选择使用人" prop="UserId">
                        <el-select placeholder="请选择使用人" v-model="AddUsageRecordDB.UserId"  filterable style="width:100%">
                            <el-option :value="0" label="请选择使用人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                        </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车品牌" prop="CarId">
                        <el-select placeholder="汽车品牌" v-model="AddUsageRecordDB.CarId" filterable style="width:100%">
                            <el-option :value="0" label="汽车品牌"></el-option>
                            <el-option v-for="(v,k) in AllVehicleinitRentId" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                        </el-select>
                        </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="使用部门" prop="CareName">
                        <el-select placeholder="使用部门" v-model="AddUsageRecordDB.DepartmentId" filterable style="width:100%">
                            <el-option :value="0" label="使用部门"></el-option>
                            <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="开始时间" prop="PurchaseDate">
                        <el-date-picker v-model="AddUsageRecordDB.StartTime"
                                        class="wmax"
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="开始时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="用车事由" prop="ReasonCar">
                        <el-input v-model="AddUsageRecordDB.ReasonCar"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="预计返回时间" prop="PlanEndTime">
                            <el-date-picker v-model="AddUsageRecordDB.PlanEndTime"
                                            class="wmax"
                                            style=" width: 100%;"
                                            type="date"
                                            placeholder="预计返回时间">
                            </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="始发地" prop="StartAddress">
                        <el-input v-model="AddUsageRecordDB.StartAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="目的地" prop="Destination">
                        <el-input v-model="AddUsageRecordDB.Destination"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="项目使用二选一" prop="State">
                        <el-select placeholder="项目使用" v-model="projecttype1" @change="projecttypeFc(1)"      filterable style="width:100%">
                            <el-option :value="0" label="项目使用"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.ProjectName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="项目使用二选一" prop="State"  >
                        <el-input v-model="projecttype2"   @change="projecttypeFc(2)"   ></el-input>
                    </el-form-item>
                </el-col>
            </el-row> 
            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="AddUsageRecordDBSave">添加汽车使用记录</el-button>
                    <el-button type="success" @click="AddUsageRecordDBreset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "AddUsageRecord",
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            AllVehicle: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                AllVehicleinitRentId: [],
                AddUsageRecordDB: {},
                projecttype1: '',
                projecttype2: '',
            }
        },
        created() {
            this.AllVehicleinit();
        },
        methods: {
            AddUsageRecordDBSave() {
                let loadding = this.openLoading();
                this.$http.post("VehicleManagement/UsageRecordInsert", { usageRecord: this.AddUsageRecordDB })
                    .then(res => {
                        loadding.close();
                        if (res.data.bit) {
                            this.$message.success("数据添加成功");
                            this.$parent.$parent.AddUsageRecordShow = false;
                            this.$parent.$parent.GettableDB();
                        }
                        else {
                            this.$message.error("添加车辆使用记录信息失败");
                        }
                    });
            },
            AddUsageRecordDBreset() {
                this.$refs["AddUsageRecordDB_refs"].resetFields();
            },
            projecttypeFc(id) {
                if (id == 1) {
                    this.projecttype2 = '';
                    this.AddUsageRecordDB.ProjectName = this.projecttype1;
                } else {
                    this.projecttype1 = '';
                    this.AddUsageRecordDB.ProjectName = this.projecttype2;
                }
            }


            , AllVehicleinit() {
                let allveh = [];
                this.AllVehicle.forEach(x => {
                    if (x.RentId != 2) {
                        allveh.push(x);
                    }
                })
                this.AllVehicleinitRentId = allveh;
            }
        },
    }
</script>
<style>
    .wmax {
        width: 100%;
    }
    .newinput {
        position: absolute;
        z-index: 2;
        width: 80%;
        border-right: 0px;
    }
</style>
